<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/car.css">
    <link rel="stylesheet" href="./font/font5/iconfont.css">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <div class="top">
            <p onclick="back()"></p>
            <p>购物车</p>
            <p onclick="show()"></p>
        </div>
        <div class="hide">
            <ul>
                <li>
                    <a href="">
                        <i class="iconfont icon-shouye"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-fenlei"></i>
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="./worth.html">
                        <i class="iconfont icon-dai"></i>
                        <p>值得买</p>
                    </a>
                </li>
                <li>
                    <a href="./car.html">
                        <i class="iconfont icon-che"></i>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="./main.html">
                        <i class="iconfont icon-wode"></i>
                        <p>我的当当</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="bg">
    <!-- <img class="bg-pic" src="./img/bg-5.gif" alt="">
    <div class="main">
        <p>您还没有购买任何商品</p>
        <div>
            <p>逛一逛</p>
            <p>我的收藏</p>
        </div>
    </div> -->
    </div>
    <div class="end">
        <div class="end-left">
            <input class="all2" type="checkbox">
            <span>全选</span>
        </div>
        <div class="end-right">
            
        </div>
    </div>
</body>
<script src="./js/reset-5.js"></script>
<script src="./js/main-5.js"></script>
<script>
    if(localStorage.getItem("login")==null){
        alert("请先登录")
        location.href="./main.html"
    }
    var bg=document.querySelector(".bg")
    var number=document.querySelectorAll('.number')
    bg.innerHTML+=`
        <div class="bg-top">
            <input class="all1" type="checkbox">
            <img src="http://cart.m.dangdang.com/images/dangdang.png" alt="">
            <p>当当网</p>
        </div>
    `
    for(var i=0;i<5;i++){
        bg.innerHTML+=`
            <div class="box boxs">
                <input class="option" type="checkbox">
                <img src="${data[i].image_url}" alt="">
                <div class="intro">
                    <p class="name">${data[i].name}</p>
                    <p class="tar">￥${data[i].price}</p>
                    <div class="number">
                        <button class="sub">-</button>
                        <input class="num" type="text" value="1">
                        </input>
                        <button class="add">+</button>
                        <p onclick="del()">删除</p>
                    </div>
                </div>
            </div>
        `
    }
        function show(){
        var top=document.querySelector(".top")
        var header=document.querySelector(".header")
        top.lastElementChild.classList.toggle("on") 
        header.classList.toggle("headers") 
    }

    //  计算总价
    var total=function(){
        var a=0
        var end=document.querySelector('.end-right')
        var box=document.querySelectorAll('.box')
        var num=document.querySelectorAll('.num')
        box.forEach(function(item,index) {
            if(item.children[0].checked==true){
                a+=data[index].price*num[index].value
            }
        })
        end.innerHTML=`
            <p>总价：<span>￥${a}</span></p>
            <p>去结算</p>
        `
    }
    total()

    // 数量增减
    var change=function(){
        var number=document.querySelectorAll('.number')
        var sub=document.querySelectorAll('.sub')
        var add=document.querySelectorAll('.add')
        var num=document.querySelectorAll('.num')
        number.forEach(function(item,index) {
            sub[index].onclick=function() {
                if(num[index].value>1) {
                    num[index].value-=1
                    total()
                }
            }
            add[index].onclick=function() {
                num[index].value=parseInt(num[index].value)+1
                total()
            }
        }) 
    }
    change()
    
    // 输入框数量
    var num=document.querySelectorAll('.num')
    num.forEach(function(item) {
        item.oninput=function() {
            total()
            change()
        }
    })

    // 选择
    var all1=document.querySelector('.all1')
        all1.onchange=function() {
            all2.checked=all1.checked
        var box=document.querySelectorAll('.box')
        box.forEach(function(item) {
            item.children[0].checked=event.target.checked
        })
        total()
    }
    var all2=document.querySelector('.all2')
        all2.onchange=function() {
        all1.checked=all2.checked
        var box=document.querySelectorAll('.boxs')
        box.forEach(function(item) {
            item.children[0].checked=event.target.checked
        })
        total()
    }

    // 选中
    var option=document.querySelectorAll('.option')
    option.forEach(function(item) {
        item.onchange=function() {
            var num=0
            option.forEach(function(item) {
                if(item.checked) {
                    num+=1
                }
            })
            if(num==option.length) {
                all1.checked=true
                all2.checked=true
            }else {
                all1.checked=false
                all2.checked=false
            }
            total()
            change()
            }
        
    })

    // 删除
    function del() {
       event.target.parentNode.parentNode.parentNode.remove()
       total()
       change()
       var box=document.querySelectorAll('.box')
       var ends=document.querySelector('.end')  
       if(box.length==0){
        bg.innerHTML=''
        bg.innerHTML+=`
            <img class="bg-pic" src="./img/bg-5.gif" alt="">
            <div class="main">
                <p>您还没有购买任何商品</p>
                <div>
                    <p>逛一逛</p>
                    <p>我的收藏</p>
                </div>
            </div>
        `
        ends.setAttribute("style","display:none")
       }else {
        ends.removeAttribute("style")
       }
   }

   function back() {
    window.history.back()
}
</script>
</html>